<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代理模式</title>
</head>
<body>
    <img id="img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F458412ef0894476c376deb206e089b27160f46ba4452-nMT6Xd_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633315734&t=5920234e8cd4c299436c724431d894e6
    " origin_src="https://tse3-mm.cn.bing.net/th/id/OIP-C.h5NwXZV015kcEO6cNjgC0wHaKj?w=182&h=260&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt="">
    <br>
    <script>
        // 图片加载会损耗性能
        // 菊花图 loading.gif  占位图 ，请求依稀，就会缓存
        // 让页面先显示出来 
        window.onload=function(){
            const oImg = document.querySelector('#img'); //标签选择器
            const origin_src=oImg.getAttribute('origin_src');   
            const temImg = document.createElement('img'); //让我们异步加载资源,代理者
            // 网络进程，DOM不去堵塞页面的，一次展示
            temImg.onload=function(){               //3
                oImg.src=origin_src;
            }
            temImg.src=origin_src;                  // 网络进程,1
            document.body.appendChild(temImg);      // 2
        }
    </script>
</body>
</html>